<template>
  <div id="app">
    <nav>
      <router-link exact to="/">首页</router-link>
      <!--1-query传参-->
      <router-link to="/one?id=1&type=2&obj={a:1,b:2}">one</router-link>
      <router-link :to="{
        path:'/one?id=11&type=12&obj={a:1,b:2}'
      }">one2
      </router-link>
      <router-link :to="{
        path:'/one',
        // query的值是一个对象，会将对象转为查询字符串与path进行拼接
        query:{
          id:21,
          type:22,
          obj:{
            a:100,
            b:200
          }
        }
      }">one3
      </router-link>
      <router-link :to="{
           name:'suibian',
                  // query的值是一个对象，会将对象转为查询字符串与path进行拼接
           query:{
              id:25,
              type:26,
              obj:{
                a:100,
                b:200
              }
           }
      }">one4
      </router-link>
      <router-link :to="{
        name:'two',
        params:{
          a:1,
          b:2,
          c:{
            age:100
          }
        }
      }">two
      </router-link>
      <router-link to="/three/1/2.html">three1</router-link>
      <router-link :to="{
        path:'/three/22/23.html'
      }">three2</router-link>
      <router-link :to="{
                name:'three',
                params:{
                    a:100,
                    b:200
                }
            }">three3</router-link>
      <router-view/>
    </nav>
  </div>
</template>
<script>
export default {
  name: "App"
}
</script>
<style lang="less" scoped>
#app {
  text-align: center;

  a {
    margin: 10px;
    color: skyblue;
  }

  a.active {
    color: red;
    font-weight: bold;
  }
}
</style>
